<template>
  <div>
    <a-drawer
      title="Flowable流程设计器"
      placement="right"
      width="100%"
      :closable="true"
      :visible="visible"
      @close="onClose"
      :bodyStyle="{padding: 0}"
    >
    <iframe width="100%" :height="fullHeight" frameborder=0 scrolling=auto src="http://127.0.0.1:8082/flowable-modeler/#/processes" />
    </a-drawer>
  </div>
</template>
<script>
export default {
  name: 'FlowableFrame',
  data () {
    return {
      visible: false,
      fullHeight: document.documentElement.clientHeight - 100

    }
  },
  methods: {
    show () {
      this.visible = true
    },
    onClose () {
      this.visible = false
      this.$emit('close')
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight - 100
      })()
    }
  },
  watch: {
    fullHeight (val) {
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  }
}
</script>
